import React from 'react';
import {Text} from 'react-native';
import ComponentFactory from './form/ComponentFactory';
import Picker from './form/Picker';
import FetchPicker from './form/FetchPicker';
import DateTimePicker from './form/DateTimePicker';
import Input from './form/Input';
import TextInput from './form/TextInput';
import TextArea from './form/TextArea';
import ImageInput from './form/ImageInput';
import Group from './form/Group';

ComponentFactory.registerComponent('group', (ctx, item) => {
  return <Group title={item.label} />;
});
ComponentFactory.registerComponent('image-picker', (ctx, item) => {
  const key = item.value;
  const counter = item.counter;
  const value = String(ctx.getValue(key) || '');
  const disabled = ctx.getDisabled(key);
  const inline = item.inline;
  return (
    <ImageInput
      label={item.label}
      messages={ctx.getMessages(key)}
      disabled={disabled}
      counter={counter}
      inline={inline}
      value={value}
      maxLength={counter}
      editable={!disabled}
      placeholder={item.label}
      onChangeText={(v) => {
        ctx.setValue(key, v);
      }}
    />
  );
});
ComponentFactory.registerComponent('text', (ctx, item) => {
  const key = item.value;
  const counter = item.counter;
  const value = String(ctx.getValue(key) || '');
  const disabled = ctx.getDisabled(key);
  const inline = item.inline;
  return (
    <TextInput
      label={item.label}
      messages={ctx.getMessages(key)}
      disabled={disabled}
      counter={counter}
      inline={inline}
      value={value}
      maxLength={counter}
      editable={!disabled}
      placeholder={item.label}
      onChangeText={(v) => {
        ctx.setValue(key, v);
      }}
    />
  );
});
ComponentFactory.registerComponent('text-area', (ctx, item) => {
  const key = item.value;
  const value = String(ctx.getValue(key) || '');
  const disabled = ctx.getDisabled(key);
  const inline = item.inline;
  return (
    <TextArea
      label={item.label}
      messages={ctx.getMessages(key)}
      disabled={disabled}
      value={value}
      editable={!disabled}
      inline={inline}
      placeholder={item.label}
      onChangeText={(v) => {
        ctx.setValue(key, v);
      }}
    />
  );
});

ComponentFactory.registerComponent('selectbox', (ctx, item) => {
  const key = item.value;
  const value = ctx.getValue(key);
  const disabled = ctx.getDisabled(key);

  return (
    <Input
      label={item.label}
      messages={ctx.getMessages(key)}
      disabled={disabled}>
      {item.items && (
        <Picker
          value={value}
          onValueChange={(v) => {
            ctx.setValue(key, v);
          }}
          items={item.items}
        />
      )}
    </Input>
  );
});

ComponentFactory.registerComponent('picker', (ctx, item) => {
  const key = item.value;
  const value = ctx.getValue(key);
  const nativeObject = ctx.getNativeObject(key);
  const {items, fetchItems} = item;
  const disabled = ctx.getDisabled(key);
  const inline = item.inline;
  return (
    <Input
      label={item.label}
      messages={ctx.getMessages(key)}
      disabled={disabled}
      inline={inline}>
      {
        <FetchPicker
          value={value}
          onValueChange={(v) => {
            ctx.setValue(key, v);
          }}
          fetch={fetchItems}
          items={items}
          nativeObject={nativeObject}
          disabled={disabled}
        />
      }
    </Input>
  );
});

ComponentFactory.registerComponent('picker-multiple', (ctx, item) => {
  const key = item.value;
  const value = ctx.getValue(key);
  const {items, fetchItems} = item;
  const nativeObject = ctx.getNativeObject(key);
  const disabled = ctx.getDisabled(key);
  const inline = item.inline;
  return (
    <Input
      label={item.label}
      messages={ctx.getMessages(key)}
      disabled={disabled}
      inline={inline}>
      {
        <FetchPicker
          multiple={true}
          value={value}
          onValueChange={(v) => {
            ctx.setValue(key, v);
          }}
          fetch={fetchItems}
          items={items}
          nativeObject={nativeObject}
          disabled={disabled}
        />
      }
    </Input>
  );
});

ComponentFactory.registerComponent('datepicker', (ctx, item) => {
  const key = item.value;
  const value = ctx.getValue(key);
  const disabled = ctx.getDisabled(key);
  return (
    <Input
      label={item.label}
      messages={ctx.getMessages(key)}
      disabled={disabled}>
      <DateTimePicker
        value={value}
        onValueChange={(v) => {
          ctx.setValue(key, v);
        }}
      />
    </Input>
  );
});

export const items = [
  {
    value: 'group1',
    label: '第一組別',
    type: 'group',
    childrens: [
      {
        type: 'text',
        label: '名稱',
        value: 'name',
        rule: {
          type: 'string',
          required: true,
          message: '名稱不能為空',
        },
        inline: true,
      },
      {
        type: 'text',
        label: '名稱',
        value: 'name1',
        rule: {
          type: 'string',
          required: true,
          message: '名稱不能為空',
        },
        inline: true,
      },
      {
        type: 'text',
        label: '名稱',
        value: 'name2',
        rule: {
          type: 'string',
          required: true,
          message: '名稱不能為空',
        },
        inline: true,
      },
      {
        type: 'text',
        label: '名稱',
        value: 'name3',
        messages: [<Text>ABC</Text>],
        rule: {
          type: 'string',
          required: true,
          message: '名稱不能為空',
        },
        inline: true,
      },
    ],
  },

  {
    type: 'selectbox',
    label: '性別',
    value: 'sex',
    disabled: (ctx, form) => {
      const {name} = form;
      return !name;
    },
    items: [
      {
        label: '男',
        value: 'MALE',
      },
      {
        label: '女',
        value: 'FAMALE',
      },
    ],
    inline: true,
  },
  {
    type: 'picker',
    label: '多選一',
    value: 'test',
    inline: true,
    onValueChange(ctx, value) {
      ctx.setValue('testMultiple', null);
    },
    fetchItems: async (page) => {
      page = page + 1;
      return {
        end: page >= 3,
        items: [
          {
            label: '選項一',
            value: `${page}1`,
          },
          {
            label: '選項二',
            value: `${page}2`,
          },
          {
            label: '選項三',
            value: `${page}3`,
          },
          {
            label: '選項四',
            value: `${page}4`,
          },
        ],
      };
    },
  },
  {
    type: 'picker-multiple',
    label: '多選多',
    value: 'testMultiple',
    inline: true,
    disabled: (ctx, form) => {
      const {test} = form;
      return !test;
    },
    fetchItems: async (page) => {
      page = page + 1;
      return {
        end: page >= 3,
        items: [
          {
            label: '選項一',
            value: `${page}1`,
          },
          {
            label: '選項二',
            value: `${page}2`,
          },
          {
            label: '選項三',
            value: `${page}3`,
          },
          {
            label: '選項四',
            value: `${page}4`,
          },
        ],
      };
    },
  },
  {
    label: '身高',
    value: 'height',
    disabled: true,
  },

  {
    label: '年齡',
    value: 'age',
    inline: true,
    rule: {
      type: 'number',
      asyncValidator: (rule, value) => {
        return new Promise((resolve, reject) => {
          if (value < 18) {
            reject('too young');
          } else {
            resolve();
          }
        });
      },
    },
  },
  {
    type: 'datepicker',
    label: '出生日期',
    value: 'birthday',
  },
  {
    type: 'text-area',
    label: '自我介紹',
    value: 'desc',
    rule: {
      type: 'string',
      required: true,
      message: '描述不能為空',
    },
  },
  {
    type: 'image-picker',
    label: '個人照片',
    value: 'pics',
    inline: true,
    rule: {
      required: true,
      message: '圖片不能為空',
    },
  },
  {
    type: 'image-picker',
    label: '個人照片',
    value: 'pics2',
    counter: 10,
    inline: false,
    rule: {
      required: true,
      message: '圖片不能為空',
    },
  },
];
